import React from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import { useHistory } from 'react-router-dom';
// import request from '@/utils/request';
import css from './index.module.less';

export default function Login() {
    // 获取接口的方法
    // const getData = () => {
    //     request.RequestApi('get', '/book/getAll').then((response) => {
    //         console.log(response);
    //     });
    // };
    const history = useHistory();
    const onFinish = (values) => {
        sessionStorage.setItem('info', JSON.stringify(values));
        history.push('/');
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div className={css.login}>
            <div className={css.main}>
                <h1>党旗飘飘管理系统</h1>
                <p>用户登录</p>
                <Form
                    name="basic"
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入你的账号!' }]}
                    >
                        <Input placeholder="账号" />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入你的密码!' }]}
                    >
                        <Input.Password placeholder="密码" />
                    </Form.Item>

                    <Form.Item name="remember" valuePropName="checked">
                        <Checkbox>自动登录</Checkbox>
                    </Form.Item>
                    
                    <div className={css.forget}>忘记密码</div>
                  
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className={css.button}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}
